<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">累加</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
    };
  },

  // before的触发条件:data被修改,但视图还未更新,此时得到的数据和视图中展示的不一致
  beforeUpdate() {
    console.log(this.count);
  },

  // 这个阶段Vue已经根据新的数据渲染了新的虚拟DOM,并根据diff算法生成了,修改了真实DOM,视图和数据已经一致
  updated() {
    console.log(this.count);
  },
};
</script>

<style>
</style>